import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';

import {
    Card, Row, Col, InputNumber,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Item } = Form;

const valueNames = [
    '　　　大箱',
    '　　　中箱',
    '　　　小箱',
    '　　超小箱',
    '　大箱(宽)',
    '　中箱(宽)',
    '　小箱(宽)',
    '超小箱(宽)',
    '　　文件箱',
    '文件箱(宽)',
    '　　超大箱',
    '超大箱(宽)',
];

interface CabinetRegisterProps {
    getFieldDecorator: any;
    detailInfo: any;
    maxCents: any;
    maxPercentage: any;
}

// eslint-disable-next-line react/prefer-stateless-function
class CabinetRegisterElem extends Component<CabinetRegisterProps> {
    render() {
        const { getFieldDecorator, detailInfo, maxCents } = this.props;

        return (
            <Card title="柜体寄存费用" bordered={false}>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={16} sm={24}>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                            {valueNames.map((item: any, index: number) => {
                                const number = index < 9 ? `0${index + 1}` : index + 1;
                                const tips = item.replace(/\s+/g, '');
                                return (
                                    <Col
                                        md={12}
                                        sm={24}
                                        key={item}
                                        style={{ display: 'flex' }}
                                    >
                                        <Item
                                            label={item}
                                            colon={false}
                                            style={{ flex: 1 }}
                                        >
                                            {getFieldDecorator(`depositP109${number}`, ({
                                                initialValue: detailInfo[`depositP109${number}`],
                                                rules: [{ required: true, message: `请输入${tips}费用` }],
                                            }))(
                                                <InputNumber
                                                    min={0}
                                                    max={maxCents}
                                                    step={1}
                                                    placeholder="请输入"
                                                    style={{ width: '100%' }}
                                                />,
                                            )}
                                        </Item>
                                        <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                                    </Col>
                                );
                            })}
                        </Row>
                    </Col>
                    <Col
                        md={8}
                        sm={24}
                        style={{ display: 'flex' }}
                    >
                        <Item
                            label="　免费时间"
                            colon={false}
                            style={{ flex: 1 }}
                        >
                            {getFieldDecorator('depositFreeHours', ({
                                initialValue: detailInfo.depositFreeHours,
                                rules: [{ required: true, message: '请输入免费时间' }],
                            }))(
                                <InputNumber
                                    min={0}
                                    step={1}
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </Item>
                        <span className="marginL8" style={{ lineHeight: '32px' }}>小时</span>
                    </Col>
                    <Col
                        md={8}
                        sm={24}
                        style={{ display: 'flex' }}
                    >
                        <Item
                            label="　间隔收费"
                            colon={false}
                            style={{ flex: 1 }}
                        >
                            {getFieldDecorator('depositIntervalHours', ({
                                initialValue: detailInfo.depositIntervalHours,
                                rules: [{ required: true, message: '请输入间隔收费' }],
                            }))(
                                <InputNumber
                                    min={0}
                                    step={1}
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </Item>
                        <span className="marginL16" style={{ lineHeight: '32px' }}>小时</span>
                    </Col>
                    <Col
                        md={8}
                        sm={24}
                        style={{ display: 'flex' }}
                    >
                        <Item
                            label="最高上限金额"
                            colon={false}
                            style={{ flex: 1 }}
                        >
                            {getFieldDecorator('depositMaxFee', ({
                                initialValue: detailInfo.depositMaxFee,
                                rules: [{ required: true, message: '请输入最高上线金额' }],
                            }))(
                                <InputNumber
                                    min={0}
                                    max={maxCents}
                                    step={1}
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </Item>
                        <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                    </Col>
                </Row>
            </Card>
        );
    }
}

export default CabinetRegisterElem;
